<template>
  <div id="app">
    <el-row class="wrapper">
      <div class="nav-box">
        <div class="logo">
          logo
        </div>
        <Navigate :navs="navsData" @click="navTo"></Navigate>
      </div>
      <Tabs ref="tabs"></Tabs>
    </el-row>
  </div>
</template>

<script>
import Navigate from '@/components/Nav.js'
import Tabs from '@/components/Tabs'

export default {
  name: 'app',
  data () {
    return {
      navsData: [
        {
          name: '导航一',
          iconClass: 'el-icon-message',
          children: [
            {
              name: '子菜单一',
              path: '/1'
            },
            {
              name: '子菜单二',
              path: '/2'
            },
            {
              name: '子菜单三',
              children: [
                {
                  name: '测试一',
                  path: '/5'
                },
                {
                  name: '测试二',
                  path: '/6'
                }
              ]
            }
          ]
        },
        {
          name: '导航二',
          iconClass: 'el-icon-menu',
          path: '/3'
        },
        {
          name: '导航三',
          iconClass: 'el-icon-setting',
          path: '/4'
        }
      ]
    }
  },
  methods: {
    navTo (item) {
      this.$refs.tabs.addTab(item)
    }
  },
  components: {
    Navigate,
    Tabs
  }
}
</script>

<style lang="scss">
  html, body {
    width: 100%;
    height: 100%;
  }
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    height: 100%;
    .wrapper {
      height: 100%;
    }
    .nav-box {
      width: 220px;
      height: 100%;
      background: #324157;
      float: left;
    }
    .logo {
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 50px;
      color: #fff;
      background: #073763;
    }
  }
</style>
